import React, {Component} from "react";
import {
    View,
    Text,
    StyleSheet,
    ListView,
    ActivityIndicator,
} from 'react-native';
import HttpUtils from '../common/HttpUtils'

const host = 'http://sxakjc.com//api/sas/';
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
const data = [
    {name: 'title', label: '标题'},
    {name: 'projname', label: '项目名称'},
    {name: 'category', label: '分类'},
    {name: 'classify', label: '体系类别'},
    {name: 'outline', label: '概要'},
    {name: 'created_at', label: '创建时间'},
    {name: 'filesize', label: '文件大小'},
    {name: 'uploader', label: '上传人'}
]

export default class ManageInfo extends Component {
    static navigationOptions = ({navigation}) => {
        const params = navigation.state.params || {};

        return {
            headerTitle: params.title,
        };
    }

    formatFormList(item) {
        data.forEach((temp) => {
            temp.value = item[temp.name]
        })

        return data;
    }

    constructor(props) {
        super(props);
        this.state = {
            params: this.props.navigation.state.params,
            dataSource: ds.cloneWithRows([]),
            isLoading: true,
        }
    }

    componentWillMount() {
        let url = host + this.state.params.id +
            '?token=' + this.state.params.token +
            '&target=' + this.state.params.target +
            '&include=attachment';

        HttpUtils.get(url)
            .then((ret) => {
                console.log(this.formatFormList(ret.data));
                this.setState({
                    dataSource: ds.cloneWithRows(this.formatFormList(ret.data)),
                    isLoading: false,
                })
            })
    }

    renderRow(item) {
        return <View style={styles.row}>
            <Text style={styles.title}>{item.label}</Text>
            <Text style={styles.text}>{item.value || ' '}</Text>
            <View style={styles.line}></View>
        </View>
    }

    render() {
        return (
            <View style={styles.container}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={(item) => this.renderRow(item)}
                />
                <View style={styles.loadingBox}>
                    <ActivityIndicator
                        animating={this.state.isLoading}
                        style={[styles.loadingBox]}
                        size="large"
                        color="#387ef5"
                    />
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "white",
        paddingBottom:30
    },
    title: {
        margin: 15,
        marginLeft: 0,
        marginBottom: 5
    },
    text: {
        fontSize: 16,
        color: "#000",
        justifyContent: "center",
        flexWrap: "nowrap",
        overflow: "hidden",
    },
    row: {
        paddingLeft: 40,
        paddingRight: 20
    },
    line: {
        height: 1,
        backgroundColor: "#ccc"
    },
    loadingBox: {
        // display: "none",
        position: 'absolute',
        left: 0,
        right: 0,
        top: 100,
    }
})